<template>
	<view class="contant">
		<view class="avatar">
			<image src="/static/images/share.png" mode="" style="width: 100%;height: 100%;"></image>
		</view>
		<view class="tit">欢迎登录</view>

		<view>
			<button class="login" @click="getUser"> 登录 </button>
		</view>

		<u-popup v-model="show" mode="bottom" border-radius="20" :closeable="true">
			<view style="padding: 15px;">
				<view class="" style="font-size: 24px;
					font-family: PingFang SC;
					font-weight: 400;
					line-height: 33px;
					color: #707070;">
					<text>授权</text>
				</view>
				<view class="" style="background: #fff;">
					<view class="">
						<view class="" style="display: flex;justify-content: space-between;padding-top: 25px;
						border-bottom: 1px solid #ececec;align-items: center;padding-bottom: 15px;">
							<text style="font-size: 16px;
							
							font-weight: 400;
							line-height: 22px;
							color: #707070;">头像</text>
							<view class="" style="display: flex;align-items: center;">
								<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
									<view class="">
										<image class="avatars" :src="avatarUrl"></image>
									</view>
								</button>
								<u-icon name="arrow-right" color="#000"></u-icon>
							</view>
						</view>
						<view class="" style="padding-top: 5px;">
							<text style="font-size: 12px;
								font-weight: 400;
								line-height: 17px;
								color: #707070;">tip：请点击右侧头像，选择“用微信头像”</text>
						</view>
					</view>
					<view class="" style="margin-top: 15px;
					">
						<view class="" style="display: flex;justify-content: space-between;
						border-bottom: 1px solid #ececec;padding-bottom: 15px;">
							<text style="font-size: 16px;
								font-weight: 400;
								line-height: 22px;
								color: #707070;">昵称</text>
							<input type="nickname" @blur="user" class="weui-input" v-model="nam" placeholder="请输入昵称" />
						</view>
						<view class="" style="padding-top: 5px;">
							<text style="font-size: 12px;
								font-weight: 400;
								line-height: 17px;
								color: #707070;">tip：点击输入框，选择键盘上面“用微信昵称”</text>
						</view>
					</view>
				</view>
				<view class="" style="display: flex;align-items: center;width: 100%;padding-top: 50px;
				justify-content: space-between;width: 80%;margin: 0 auto;">
					<view class="" style="display: flex;justify-content: center;">
						<text style="background: rgba(248,248,248,0.5);
						opacity: 1;
						border-radius: 18px;font-size: 12px;
						font-weight: 400;
						line-height: 17px;
						color: #A7A7A7;padding: 10px 30px;" @click="show=false">拒绝授权</text>
					</view>
					<view class="" @click="submit_user" style="display: flex;justify-content: center;">
						<text style="background: rgba(26,189,106,1);
						opacity: 1;
						border-radius: 18px;font-size: 12px;
						font-weight: 400;
						line-height: 17px;
						color: #fff;padding: 10px 30px;">确认授权</text>
					</view>
				</view>
			</view>
		</u-popup>

		<ysmodel :onNeed='false' :hideTabBar='true'></ysmodel>
	</view>
</template>

<script>
	// import config from '@/common/config/index.js'
	import ysmodel from '@/components/ys-model.vue'
	export default {
		components: {
			ysmodel,
		},
		data() {
			return {
				prourl: 'https://www.shiwangdaoju.cn/api/',
				value: '',
				current: 2,
				phone: '',
				password: '',
				hasUserInfo: false,
				avatarUrl: '',
				show: false,
				nam: '',
				code: '',
				pid: '',
				avatarimg: '',
				checked: false,
				name: '',
			};
		},
		onShow() {
		
			// if (uni.getStorageSync("scene") != '') {
			// 	console.log(uni.getStorageSync("scene"), '2222222');
			// }
			this.login()
		},
		onLoad(e) {


		},
		methods: {
			ruzhu() {
				uni.navigateTo({
					url: '/subpkgA/merset/merset'
				})
			},
			xieyi() {
				uni.navigateTo({
					url: '/subpkg/privacy/privacy?id=' + this.current
				})
			},
			checkboxChange(e) {
				this.checked = e
			},
			user(e) {
				this.nam = e.detail.value
			},
			async submit_user() {
				if (this.nam == '') {
					uni.showToast({
						icon: 'none',
						title: '请选择昵称'
					})
					return
				}
				if (this.avatarimg == '') {
					uni.showToast({
						icon: 'none',
						title: '请选择头像'
					})

					return
				}
				let data = {
					code: this.code,
					username: this.nam,
					avatar: this.avatarimg
				}
				let that = this;
				that.loadStatus = 'loading';
				that.$http('user.auth', data, '加载中...').then(res => {
					if (res.code === 1) {
						uni.setStorageSync('token', res.data.token)
						uni.setStorageSync('isLogin', true)
						
						uni.showToast({
							icon: 'none',
							title: '登录成功'
						})
						setTimeout(() => {
							uni.reLaunch({
								url: '/pages/index/user'
							})
						}, 800)
					}
				});
				// let res = await this.$http.index.auth({
				// 	code: this.code,
				// 	username: this.nam,
				// 	avatar: this.avatarimg
				// })


				// uni.setStorageSync('token', res.data.token)
				// this.edit_img()
				// if (res.code == 1) {
				// 	uni.showToast({
				// 		icon: 'none',
				// 		title: '登录成功'
				// 	})
				// 	setTimeout(() => {
				// 		uni.switchTab({
				// 			url: '/pages/index/index'
				// 		})
				// 	}, 800)
				// }
			},
			onChooseAvatar(e) {
				let that = this;
				console.log(e, '头像');
				uni.uploadFile({
					url: that.prourl + 'common/upload', //仅为示例，非真实的接口地址
					filePath: e.detail.avatarUrl,
					name: 'file',
					success: (uploadFileRes) => {
						let data = JSON.parse(uploadFileRes.data)
						if (data.code == 1) {
							that.avatarUrl = data.data.fullurl
							that.avatarimg = data.data.url
						}
					}
				});
			},
			open() {},
			close() {
				this.show = false
			},
			edit_img() {},
			getUser() {
				console.log(6555555);
				let that = this;
				that.show = true
				// 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认
				// 开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
				// wx.getUserProfile({
				// 	desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
				// 	success: (res) => {

				// 		that.avatarUrl = res.userInfo.avatarUrl
				// 		that.nam = res.userInfo.nam
				// 	},
				// 	complete(res) {
				// 		console.log(res);
				// 	},
				// })
			},

			login() {
				let that = this
				// #ifdef MP-WEIXIN
				wx.login({

					success(res) {
						that.code = res.code
						console.log(res.code, '111');
						// if (res.code) {
						// 	//发起网络请求
						// 	wx.request({
						// 		url: 'https://yanfang.wuyi.link/api/wechat.auth/auth',
						// 		data: {
						// 			code: res.code
						// 		}
						// 	})
						// } else {
						// 	console.log('登录失败！' + res.errMsg)
						// }
					}
				})
				// #endif

			},
			async submit() {
				if (this.checked == false) {
					this.$tips('请先阅读用户协议')
					return
				}

				let res = await this.$http.index.login({
					account: this.phone,
					password: this.password
				})
				if (res.code == 1) {
					let token = 'Bearer' + ' ' + res.data.userinfo.token
					// let token = res.data.userinfo.token
					// let user = res.data.userinfo
					uni.setStorageSync('token', token)
					// uni.setStorageSync('userinfo', user)
					uni.setStorageSync('type', 1)
					uni.showToast({
						icon: 'none',
						title: '登录成功'
					})
					setTimeout(() => {
						uni.redirectTo({
							url: '/subpkgA/finding/finding'
						})
					}, 1000)

				} else if (res.code == 0) {
					this.$tips(res.msg)
				}
			},
			btn(i) {
				if (i == 1) {
					this.name = '企业端'
				} else {
					this.name = '用户端'
				}
				// this.checked = false
				this.current = i
			},
		},
	}
</script>
<style>
	page{
		background-color: #fff !important;
	}
</style>
<style lang="scss" scoped>
	.flex {
		display: flex;
		align-items: center;
	}

	/deep/ .u-input__content__field-wrapper__field {
		height: 20px !important;
	}

	/deep/.u-input {
		margin-bottom: 15px;
	}

	/deep/ .u-input {
		padding: 15px !important;
	}

	.contant {
		padding: 15px 30px;
		position: relative;
		height: calc(100vh - 100px);

		.avatar {
			margin: 15% auto 10px;
			width: 125px;
			height: 125px;
			background: rgba(0, 0, 0, 0);
			overflow: hidden;
			border: 2px solid #E77817;
			box-shadow: 0px 0px 6px rgba(231, 120, 23, 0.48);
			border-radius: 50%;
			opacity: 1;
		}

		.tit {
			font-size: 18px;
			font-weight: 400;
			color: #040E21;
			text-align: center;
		}

		.logins {
			width: 100%;
			padding: 15px 0;
			text-align: center;
			background: #E77817;
			box-shadow: 0px 3px 6px rgba(231, 120, 23, 0.48);
			opacity: 1;
			border-radius: 25px;
			font-size: 16px;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 22px;
			color: #FFFFFF;
			margin-top: 15px;
		}

		.login {
			width: 100%;
			padding: 15px 0;
			text-align: center;
			background: #E77817;
			box-shadow: 0px 3px 6px rgba(231, 120, 23, 0.48);
			opacity: 1;
			border-radius: 25px;
			font-size: 16px;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 22px;
			color: #FFFFFF;
			margin-top: 50%;
		}

		.tits {
			position: absolute;
			transform: translateX(-50%);
			left: 50%;
			bottom: 0%;
			font-size: 16px;
			font-weight: 500;
			line-height: 17px;
			color: #040E21;
			opacity: 0.6;
			padding: 15px 0;
		}
	}

	.avatar-wrapper {
		padding: 0;
		border-radius: 8px;
		border: none !important;
		// background: #FFFFFF !important;
		width: 50px;
		height: 50px;
		margin: 0;
		// margin-top: 25px;
		// margin-bottom: 15px;
	}

	.avatars {
		display: block;
		width: 50px;
		height: 50px;
	}

	.container {
		display: flex;
	}

	.weui-input {
		width: 70%;
		text-align: right;
	}
</style>